<!--下订单勾选商品-->
<style scoped lang="less">
  .choice-good{
    border-bottom: 1px solid #efefef;
    &:last-of-type{
      border:none;
    }
  }
</style>


<template>
  <div class="contain">
    <app-header></app-header>
    <!--search-->
    <div class="m-sech-wrap mr20">
      <router-link :to="{path:'/order/seachGoods',query: {MedGuid:$route.query.MedGuid, GoodsCate: $route.query.billtype}}" class="m-sech-box displayflex">
        <i class="iconfont icon-search"></i>
        <div class="flex1 m-sech-ipt">
          <div class="txt">{{sechTxt || '搜索商品'}}</div>
        </div>
      </router-link>
    </div>

    <scroller lock-x scrollbar-y use-pullup height="-114" v-if="todolist.length > 0" ref="Scroller" :pullup-config="ScrollerConfig" @on-pullup-loading="getData">
      <div>
        <div class="choice-good" v-for="item in todolist">
          <label class="displayflex list-goods-warp" @change="iptClick(item)">
            <input type="checkbox" class="list-radio-check" v-model="checkItem" :value="item">
            <span class="list-radio-circle"></span>
            <div class="pic">
              <img :src="item.PictContent | filterImgUrl">
            </div>
            <div class="msg flex1">
              <p class="ft17">{{item.GoodsName}}</p>
              <p>{{item.GoodsSpec}}</p>
              <p>{{item.Producer}}</p>
              <p class="org1 ft17">￥{{item.Price | filterPrice}}/{{item.UnitStyle}}</p>
            </div>
          </label>
          <div class="num-selector num-sele-pos displayflex">
            <i class="iconfont icon-reduce" @click="changeNum(item,-1)"></i>
            <input number type="text" class="flex1" placeholder="0" v-model="item.PurchaserPoQty" @input="iptBlur(item)">
            <i class="iconfont icon-add" @click="changeNum(item,1)"></i>
          </div>
        </div>
      </div>
      <div v-if="noMore" class="loader-over">没有更多记录了</div>
    </scroller>

    <div class="noDate_page" v-if="todolist.length <= 0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>

    <div class="detail-bottom displayflex">
      <span>合计：<em class="red">￥{{amount | fmoney}}</em></span>
      <div class="flex1 btn-grp">
        <div @click="checkedItem(1)" class="btn">已选({{checkItem.length}})</div>
        <div @click="checkedItem(-1)" class="btn">选好了</div>
      </div>
    </div>

  </div>
</template>

<script>
import appHeader from '@/components/core/header/app_header.vue';
export default {
  components:{
    appHeader
  },
  name: "placeChoice",
  data() {
    return {
      sechTxt: "",
      todolist: [],
      totalRecords: 0,
      PageIndex: 1,
      PageSize: 5,

      amount: 0,
      checkItem: [],

      noMore:false,
      ScrollerConfig: {
        content: '上拉加载',
        downContent: '上拉加载',
        height: 0,
        loadingContent: '加载中...',
        upContent: '上拉加载',
      },
    };
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo') === null?null:JSON.parse(localStorage.getItem('userinfo'));
    }
  },
  created() {
    this.sechTxt = sessionStorage.sechTxt;
    this.getData(1);
  },
  methods: {
    //加减
    changeNum: function(product, way) {
      console.log(product)
      if (way > 0) {
        product.PurchaserPoQty++;
      } else if (way < 0 && product.PurchaserPoQty > 0) {
        product.PurchaserPoQty--;
      } else {
        this.Toast({
          message: "请输入大于0的数"
        });
      }
      if (product.checkedshow) {
        this.amountNum();
      }
    },

    //数量输入框
    iptBlur(val) {
      if (!isNaN(val.PurchaserPoQty) && val.PurchaserPoQty) {
        val.PurchaserPoQty = parseInt(val.PurchaserPoQty);
      } else {
        val.PurchaserPoQty = 0;
      }
      if (val.checkedshow) {
        this.amountNum();
      }
    },

    //选中点击
    iptClick(val) {
      val.checkedshow = !val.checkedshow;
      this.amountNum();
    },

    amountNum() {
      this.amount = 0;
      for (var i = 0; i < this.checkItem.length; i++) {
        var price = this.checkItem[i].Price || 0;
        var qty = this.checkItem[i].PurchaserPoQty || 0;
        this.amount += price * parseInt(qty);
      }
    },

    checkedItem(way) {
      let paths = "";
      if (way == 1) {
        paths = "/order/placeChoiced";
      } else {
        if (this.userinfo.UserBizType == "Hospital") {
          paths = "/order/placeCusOrder";
        } else {
          paths = "/order/placeOrder";
        }
      }
      var value = this.checkItem;
      for (var i = 0; i < value.length; i++) {
        if (!value[i].PurchaserPoQty || value[i].PurchaserPoQty == "0") {
          this.Toast({
            message: "选择的商品数量不能为零"
          });
          return false;
        }
      }
      if (value.length > 0) {
        sessionStorage.goods = JSON.stringify(this.checkItem);
        this.$router.replace({
          path: paths
        });
      } else {
        this.Toast({
          message: "请选择商品"
        });
      }
    },

    getData(type) {
      let medguid = this.$route.query.MedGuid;
      //客户登录查询商品
      if (this.userinfo.UserBizType == "Hospital") {
        var query = {
            MedGuid: medguid,
            TenantGuid: this.userinfo.TenantGuid,
            CorpGuid: this.userinfo.CorpGuid
          };
        this.Ajax.post("SearchMfsupplyrelation", query).then((resp) => {
          if (resp.IsSuccess) {
            var supp = resp.Data;
            this.getDataGoods(type, supp.CreateUserID, this.userinfo.TenantGuid, this.userinfo.CorpGuid, medguid);
          }
        });
      } else {
        this.getDataGoods(type, this.userinfo.StaffID, this.userinfo.TenantGuid, this.userinfo.CorpGuid, medguid);
      }
    },

    getDataGoods(type, StaffID, TenantGuid, CorpGuid,medguid) {
      if (type == 1) {
        this.PageIndex = 1;
        this.todolist = [];
      }
      let billtype = this.$route.query.billtype,
          query = {
            StaffID: StaffID,
            MedGuid: medguid,
            GoodsName: this.sechTxt || "",
            PageIndex: this.PageIndex,
            PageSize: this.PageSize,
            GoodsCate: billtype
          };
      this.Ajax.post("Getmfgoods", query).then((resp) => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords;
          if (resp.Datas.length > 0) {
            this.PageIndex++;
            this.todolist = this.todolist.concat(resp.Datas);
            this.ScrollControl();
          }

          //刷新存数据
          if (sessionStorage.goods) {
            this.checkItem = JSON.parse(sessionStorage.goods);
          }
          if (this.checkItem.length > 0 && this.todolist.length > 0) {
            let copy = [];
            this.checkItem.forEach((x) => {
              copy.push(x);
            });
            copy.forEach((x,i) => {
              this.todolist.forEach((y) => {
                if(y.Guid === x.Guid){
                  y.checkedshow = true;
                  y.PurchaserPoQty = copy[i].PurchaserPoQty;
                  this.checkItem.splice(i, 1, y);
                }
              });
            });
            this.amountNum();
          }
        } else {
          this.Toast({
            message: resp.ErrorMessage || "操作异常，请稍后重试"
          });
        }
      });
    },
    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.ScrollerConfig.content = '';
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if(this.todolist.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.todolist.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    },
  },
  filters: {
    //价格
    filterPrice(val) {
      return val ? val.toFixed(2) : 0;
    }
  },
};
</script>